@{
    Layout = "_Layout";
    ViewData["Title"] = "体重管理";
}

<el-alert title="温馨提示"
          type="info"
          show-icon
          :closable="false"
          class="mt-4">
    <ul>
        <li>建议每天固定时段测量体重，以获得更准确的趋势分析</li>
        <li>早晨空腹测量的体重通常较为稳定</li>
        <li>可选择记录体脂率、肌肉量等额外指标</li>
        <li>每个时段只能记录一次体重</li>
    </ul>
</el-alert>
<div style="height:20px;"></div>
<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               v-on:on-load="onLoad">

        <template slot="weighG" slot-scope="scope">
            <div>{{scope.row.weighKg|weighGFilter}}</div>
        </template>

        <template slot="record" slot-scope="scope">
            <modify-record :data="scope.row"></modify-record>
        </template>
    </avue-crud>
</el-container>
@section Scripts {
    <script src="~/js/echarts.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    name: "WeighInfo",
                    pageUrl: `/WeighInfo/pages`,
                    addUrl: `/WeighInfo/add`,
                    editUrl: `/WeighInfo/update`,
                    deleteUrl: `/WeighInfo/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`WeighInfo:searchBtn`),
                        refreshBtn: Permissions.avePermission(`WeighInfo:searchBtn`),
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            {
                                prop: "weighTime",
                                label:`${this.i18n.t('体重时间')}`,
                                type: "date",
                                valueFormat: 'yyyy-MM-dd',
                                format: 'yyyy-MM-dd',
                                slot: true,
                                search: true,
                                hide: false,
                                width: '180',span:13,
                                clearable: true,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                                value: this.getCurrentDate() // 添加默认值为当前日期
                            },
                            { prop: "meridiem", label: `${this.i18n.t('时段')}`, search: true, hide: false, value: 1, type: "select",span:11, button: true, dicUrl:"/meridiem/list",props:{label: "name", value: "id",res: "data.rows" }, width: '80', },
                            { prop: "weighKg", label: `${this.i18n.t('体重(KG)')}`, slot: true, type: "number",search: false,hide: false,  width: '90', clearable: true,row:true ,span:13, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],},
                            { prop: "weighG", label: `${this.i18n.t('体重(斤)')}`, slot: false, search: false,hide: false, display: false, clearable: true,row:true ,span:12, formatter: row => row.weighKg * 2},

                            {
                                prop: "bodyMetrics",
                                label: `${this.i18n.t('身体成分')}`,
                                type: "group",headerAlign:"center",
                                hide: false,row:true,span:24,  labelWidth: "150",

                                children: [
                                            {
                                                prop: "bodyFat",
                                                label: `${this.i18n.t('体脂率(%)')}`,
                                                value: undefined,
                                                type: "input",
                                                search: false,
                                                hide: false,
                                                width: '110',
                                                clearable: true,
                                                span: 12,
                                                rules: [{
                                                    required: false,
                                                    message: '体脂率应在5-50%之间',
                                                    trigger: "blur",
                                                    validator: (rule, value, callback) => {
                                                        if (!value) {
                                                            callback();
                                                        } else {
                                                            const numValue = parseFloat(value);
                                                            if (isNaN(numValue)) {
                                                                callback(new Error('体脂率必须为数字'));
                                                            } else if (numValue < 5 || numValue > 50) {
                                                                callback(new Error('体脂率应在5-50%之间'));
                                                            } else {
                                                                callback();
                                                            }
                                                        }
                                                    }
                                                }]
                                            },
                                            {
                                                prop: "muscleMass",
                                                label: `${this.i18n.t('肌肉量(kg)')}`,
                                                value: undefined,
                                                type: "input",
                                                search: false,
                                                hide: false,
                                                width: '110',
                                                clearable: true,
                                                span: 12,
                                                rules: [{
                                                    required: false,
                                                    message: '肌肉量应在10-150kg之间',
                                                    trigger: "blur",
                                                    validator: (rule, value, callback) => {
                                                        if (!value) {
                                                            callback();
                                                        } else {
                                                            const numValue = parseFloat(value);
                                                            if (isNaN(numValue)) {
                                                                callback(new Error('肌肉量必须为数字'));
                                                            } else if (numValue < 10 || numValue > 150) {
                                                                callback(new Error('肌肉量应在10-150kg之间'));
                                                            } else {
                                                                callback();
                                                            }
                                                        }
                                                    }
                                                }]
                                            },
                                            {
                                                prop: "water",
                                                label: `${this.i18n.t('水分率(%)')}`,
                                                value: undefined,
                                                type: "input",
                                                search: false,
                                                hide: false,
                                                width: '110',
                                                clearable: true,
                                                span: 12,
                                                rules: [{
                                                    required: false,
                                                    message: '水分率应在30-70%之间',
                                                    trigger: "blur",
                                                    validator: (rule, value, callback) => {
                                                        if (!value) {
                                                            callback();
                                                        } else {
                                                            const numValue = parseFloat(value);
                                                            if (isNaN(numValue)) {
                                                                callback(new Error('水分率必须为数字'));
                                                            } else if (numValue < 30 || numValue > 70) {
                                                                callback(new Error('水分率应在30-70%之间'));
                                                            } else {
                                                                callback();
                                                            }
                                                        }
                                                    }
                                                }]
                                            },
                                            {
                                                prop: "boneMass",
                                                label: `${this.i18n.t('骨量(kg)')}`,
                                                value: undefined,
                                                type: "input",
                                                search: false,
                                                hide: false,
                                                width: '110',
                                                clearable: true,
                                                span: 12,
                                                rules: [{
                                                    required: false,
                                                    message: '骨量应在1-15kg之间',
                                                    trigger: "blur",
                                                    validator: (rule, value, callback) => {
                                                        if (!value) {
                                                            callback();
                                                        } else {
                                                            const numValue = parseFloat(value);
                                                            if (isNaN(numValue)) {
                                                                callback(new Error('骨量必须为数字'));
                                                            } else if (numValue < 1 || numValue > 15) {
                                                                callback(new Error('骨量应在1-15kg之间'));
                                                            } else {
                                                                callback();
                                                            }
                                                        }
                                                    }
                                                }]
                                            },
                                            {
                                                prop: "bmr",
                                                label: `${this.i18n.t('基础代谢(kcal)')}`,
                                                value: undefined,
                                                type: "input",
                                                labelWidth: "110",
                                                search: false,
                                                hide: false,
                                                width: '130',
                                                clearable: true,
                                                span: 12,
                                                rules: [{
                                                    required: false,
                                                    message: '基础代谢应在800-3000kcal之间',
                                                    trigger: "blur",
                                                    validator: (rule, value, callback) => {
                                                        if (!value) {
                                                            callback();
                                                        } else {
                                                            const numValue = parseFloat(value);
                                                            if (isNaN(numValue)) {
                                                                callback(new Error('基础代谢必须为数字'));
                                                            } else if (numValue < 800 || numValue > 3000) {
                                                                callback(new Error('基础代谢应在800-3000kcal之间'));
                                                            } else {
                                                                callback();
                                                            }
                                                        }
                                                    }
                                                }]
                                            },
                                            {
                                                prop: "visceralFat",
                                                label: `${this.i18n.t('内脏脂肪等级')}`,
                                                labelWidth: "110",
                                                value: undefined,
                                                type: "input",
                                                search: false,
                                                hide: false,
                                                width: '130',
                                                clearable: true,
                                                span: 12,
                                                rules: [{
                                                    required: false,
                                                    message: '内脏脂肪等级应在1-30之间',
                                                    trigger: "blur",
                                                    validator: (rule, value, callback) => {
                                                        if (!value) {
                                                            callback();
                                                        } else {
                                                            const numValue = parseFloat(value);
                                                            if (isNaN(numValue)) {
                                                                callback(new Error('内脏脂肪等级必须为数字'));
                                                            } else if (numValue < 1 || numValue > 30) {
                                                                callback(new Error('内脏脂肪等级应在1-30之间'));
                                                            } else {
                                                                callback();
                                                            }
                                                        }
                                                    }
                                                }]
                                            }
                                        ]
                            },

                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, width: 140,align:`center` },
                        ],
                    },

                }
            },
            created() {

            },
            methods: {
                getCurrentDate() {
                    const today = new Date();
                    const year = today.getFullYear();
                    const month = String(today.getMonth() + 1).padStart(2, '0');
                    const day = String(today.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 2) {
                        if (row.meridiem == 1) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                formatDate(date) {
                    if (date instanceof Date) {
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, '0');
                        const day = String(date.getDate()).padStart(2, '0');
                        return `${year}-${month}-${day}`;
                    } else {
                        if (typeof date === 'string') {
                            const parsedDate = new Date(date);
                            if (!isNaN(parsedDate.getTime())) {
                                return this.formatDate(parsedDate);
                            }
                        } else if (typeof date === 'number') {
                            const parsedDate = new Date(date);
                            if (!isNaN(parsedDate.getTime())) {
                                return this.formatDate(parsedDate);
                            }
                        }
                        return '';
                    }
                }
            },
             filters: {
                weighGFilter(value) {
                  if (!value) return '';
                  return value * 2;
                }
              }
        });
    </script>
}